<template>
	<view>
		<!-- 底部保存按钮 -->
		<view style="height:120rpx"></view>
		<view class="bottom-btn u-flex u-flex-between u-flex-y-center">
			<view v-if="isShow" class="bottom-btn__left u-flex u-flex-y-center" @click="onSelectAll">
				<text class="change-text">{{ isAllSelect ? '全选' : '全不选' }}</text>
				<view class="is-allSelect" v-if="isAllSelect"><u--image :showLoading="true" :src="changeImg" width="48rpx" height="48rpx"></u--image></view>
				<view class="is-allSelect" v-if="!isAllSelect"><u--image :showLoading="true" :src="notChangeImg" width="48rpx" height="48rpx"></u--image></view>
			</view>
			<view class="bottom-btn__right"><u-button :loading="loading" shape="circle" :custom-style="sumbitBtnCss" @click="changeFunc" :icon="icon" :text="title"></u-button></view>
		</view>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
import { notChangeImg, changeImg } from '@/static/js/image.js';
export default {
	props: {
		// 图标
		icon: {
			type: String,
			default: ''
		},
		// 标题
		title: {
			type: String,
			default: '提交'
		},
		loading: {
			type: Boolean,
			default: false
		},
		//是否显示全选按钮
		isShow: {
			type: Boolean,
			default: false
		},
		//是否全选
		isAllSelect: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			sumbitBtnCss: {
				// 提交按钮的样式
				background: 'linear-gradient(270deg, rgba(47, 176, 252, 0.5) 0%, #0033FF 100%)',
				color: '#fff'
				// fontSize: '32rpx'
			},
			notChangeImg,
			changeImg
		};
	},
	methods: {
		changeFunc() {
			this.$emit('change');
		},
		onSelectAll() {
			this.$emit('selectAll', this.isAllSelect);
		}
	}
};
</script>

<style lang="scss">
.bottom-btn {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	padding: 0 30rpx;
	height: 120rpx;
	background: #fff;
	display: flex;
	z-index: 99;

	&__left {
		width: 350rpx;
		margin-top: 30rpx;
		display: flex;
	}

	&__right {
		width: 100%;
		margin-top: 28rpx;
	}
	.is-allSelect {
		line-height: 114rpx;
	}
	.change-text {
		margin-right: 10rpx;
	}
}
</style>
